<template>
    <div>
        <!-- 查询按钮 -->
        <el-popover placement="bottom-start" width="1000" style="box-shadow: 0 0 8px rgba(0,0,0,.5);" trigger="click">
            <el-form :inline="true" :model="root.popover.form"  label-width="120px">                                         
                <el-form-item label="浆员姓名=" style="margin-bottom: 0;">
                    <el-input v-model="root.popover.form.providerName" style="width: 150px;" clearable></el-input>
                </el-form-item>
                <el-form-item label="记录生成时间>=" style="margin-bottom: -10px; margin-top: 5px;">
                     <el-date-picker
                        v-model="root.popover.form.createTimeGreater"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>                          
                <el-form-item label="记录生成时间<=" style="margin-bottom: -10px; margin-top: 5px;">
                     <el-date-picker
                        v-model="root.popover.form.createTimeLess"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                 <el-form-item label="护士姓名=" style="margin-bottom: -10px; margin-top: 5px;">
                    <el-select  v-model="root.popover.form.nurseName"  style="width: 100px;">
                        <el-option value="" label="【空】"></el-option>
                        <el-option  v-for="item in root.popover.cache.nurseData" :key="item.id" :value="item.name" :label="item.name"></el-option>
                    </el-select>
                </el-form-item> 
                    <br/>                       
                    <el-button type="primary"  @click="initRootTableData('all')" style="float:right;margin-top: 20px;margin-right: 25px;">搜索</el-button>
                    <el-button type="primary"  @click="initRootTableData('clear')" style="float:right;margin-top: 20px;margin-right: 15px;">刷新</el-button>
            </el-form>
                    <el-button slot="reference" type="primary">查询</el-button>
        </el-popover>   
        <!-- 表格 -->
        <el-table :data="root.table.rowsData" stripe border class="company-table" style="width: 100%;" :height="outHeight" v-loading="root.table.option.loading">
                    <el-table-column prop="providerName" label="浆员姓名" sortable min-width="90">
                    </el-table-column>
                    <el-table-column prop="communicateType" label="沟通方式" sortable min-width="120">
                         <template slot-scope="scope">
                             <div v-html="scope.row.communicateType =='1'?'电话':scope.row.communicateType=='2'?'面谈':scope.row.communicateType=='3'?'微信':scope.row.communicateType=='4'?'QQ':'未动作'"></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="communicateState" label="沟通状态" sortable min-width="120">
                         <template slot-scope="scope">
                             <div v-html="scope.row.communicateState=='1'?'已沟通':'未沟通'"></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="生成时间" sortable min-width="120">
                         <template slot-scope="scope">      
                             <div  v-html="timestampToTime(scope.row.createTime,'yyyy-mm-dd')"></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="completeTime" label="完成时间" sortable min-width="120">
                         <template slot-scope="scope">      
                             <div  v-html="timestampToTime(scope.row.completeTime,'yyyy-mm-dd')"></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="nurseId" label="护士姓名" sortable min-width="90">
                         <template slot-scope="scope">
                             <div v-for="item in root.popover.cache.nurseData" v-if="item.id==scope.row.nurseId?true:false">
                                  {{item.name}}
                            </div>      
                         </template>
                    </el-table-column>
                    <el-table-column prop="returnVisitType" label="回访类型" sortable min-width="90">
                         <template slot-scope="scope">      
                             <div  v-html="scope.row.returnVisitType=='1'?'未定义':'未定义'"></div>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" sortable align="center" min-width="75">
                        <template slot-scope="scope">
                            <el-button  @click="editButtonEventFun('edit',scope.row)" type="text" size="small">编辑</el-button>
                        </template>
                    </el-table-column>
        </el-table>
        <el-pagination background @size-change="xyReturnVisitSizeChange" @current-change="xyReturnVisitCurrentChange" :current-page="root.table.pagination.currentPage" :page-sizes="[10, 15,20, 25,30,50, 100]" :page-size="root.table.pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="root.table.pagination.total"></el-pagination>    
        <!-- 弹窗 -->
    <div style="width:100%;">
        <el-dialog  :title="root.dialog.config.title" :visible.sync="root.dialog.config.isShow"  @close="closeDialog" :close-on-click-modal="false" top="2vh" width="55%" v-dialogDrag style="margin-top: -25px;"> 
            <div :style="root.dialog.height"> 
                <h3  class="dialog-plate-title"><span>浆员信息</span></h3>
                <pulpworkInfo :cardid="root.dialog.pulpworkInfo.cardid" :datatype="root.dialog.pulpworkInfo.datatype" style="width:100%"></pulpworkInfo>
                <h3  class="dialog-plate-title"><span>相关信息</span></h3>
                <el-form :inline="true" :model="root.dialog.form" class="demo-ruleForm" label-width="100px">                                         
                    <el-form-item label="记录生成时间" style="margin-top: 5px;">
                        <el-input v-model="root.dialog.form.createTime" style="width: 200px;" clearable disabled></el-input>
                    </el-form-item>
                    <el-form-item label="完成时间" style="margin-top: 5px;">
                        <el-input v-model="root.dialog.form.completeTime" style="width: 200px;" clearable disabled></el-input>
                    </el-form-item>
                    <br/>
                    <el-form-item label="护士" style="margin-top: 5px;">
                        <el-input v-model="root.dialog.form.nurseName" style="width: 200px;" clearable disabled></el-input>
                    </el-form-item>
                    <el-form-item label="完成用时" style="margin-top: 5px;">
                        <el-input v-model="root.dialog.form.completeUseTime" style="width: 200px;" clearable disabled></el-input>
                    </el-form-item>
                    <br/>
                    <el-form-item label="沟通方式" style="margin-top: 5px;">
                        <el-select v-model="root.dialog.form.communicateType" placeholder="请选择" style="width: 120px;">
                            <el-option label="电话" value="1"></el-option>
                            <el-option label="面谈" value="2"></el-option>
                            <el-option label="微信" value="3"></el-option>
                            <el-option label="QQ" value="4"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="沟通状态" style="margin-top: 5px;">
                        <el-select v-model="root.dialog.form.communicateState" placeholder="请选择" style="width: 120px;">
                            <el-option label="未完成" value="2"></el-option>
                            <el-option label="已完成" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <br/>
                    <el-form-item label="沟通内容" style="margin-top: 5px;">
                        <el-input
                        type="textarea"
                        placeholder="请输入内容"
                        v-model="root.dialog.form.communicateContent"
                        maxlength="1500"
                        show-word-limit
                        style="width: 600px;"
                        >
                        </el-input>
                    </el-form-item>  
                    <br/>
                    <h3  class="dialog-plate-title"><span>提醒项</span></h3>
                    <span style="color:red">勾选表示满意，不勾选表示不满意</span>
                    <el-form-item label="" style="margin-top: 5px;">
                        <el-checkbox v-model="root.dialog.isCheckBox"   @change="handleCheckAllChange">全选</el-checkbox>
                        <el-checkbox-group v-model="root.dialog.form.returnVisitSelectedScore"  label-width="200px" >
                            <el-checkbox v-for="item in root.dialog.cache.jzInfoDataItem" :label="item.name" :key="item.name">{{item.name}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-button  type="primary" style="margin-top: 10px;" @click="updateButtonEventFun">提交</el-button>
                    <!-- 内部表格信息 -->
                    <div style="float:left;width:60%;">
                    </div>
                    <br/>
                </el-form>
            </div>
        </el-dialog>
        </div>
    </div>
</template>
<script>
import bloodSourcesHttp from 'plugins/axios/bloodSourcesHttp.js';
import api from 'plugins/axios/api.js';
import analysisHttp from 'plugins/axios/analysisHttp.js';
import pulpworkInfo from 'views/operationManage/components/pulpworkInfo.vue';
export default {
    data(){
        return{
            root:{
                popover:{
                    cache:{
                        nurseData:[],
                    },
                    form:{
                            providerName:null ,
                            createTimeGreater:null ,
                            createTimeLess:null,
                            nurseName:null
                    }
                },
                table:{
                    option:{
                        loading:true
                    },
                    rowsData:[],
                    pagination:{
                        currentPage:1,
                        pageSize:10,
                        total:0
                    }
                },
                dialog:{
                    isCheckBox:false,
                    cache:{
                        jzInfoDataResponse:[],
                        jzInfoDataItem:[],
                    },
                    config:{
                        title:null,
                        isShow:false,
                        isNurse:false,
                        buttonShow:false,
                        isTableShow:false,
                        isEdit:false,
                        rowIndex:null,
                    },
                    height:{
                        height: document.documentElement.clientHeight - 90+ 'px',
                        overflowY: 'auto',
                        width:'100%'
                    },
                    pulpworkInfo:{
                        cardid:null,
                        datatype:null
                    },              
                    form:{
                        cardId: null,
                        communicateContent: null,
                        communicateState: null,
                        communicateType: null,
                        completeTime: null,
                        completeUseTime: null,
                        createTime: null,
                        id: null,
                        nurseDeptId: null,
                        nurseId: null,
                        nurseName: null,
                        providerId: null,
                        providerName: null,
                        pulpingMachineNumber: null,
                        returnVisitSelectedNumber: null,
                        returnVisitSelectedScore: null,
                        returnVisitType: null
                    },
                    table:{
                        rowsData:[]
                    },
                    dialog:{
                        conDate:null,
                        conContent:null
                    },
                    timer:{
                        alarmClock:null,
                        hour:0,
                        min:0,
                        second:0,
                        textHour:'0',
                        textMin:'0',
                        textSecond:'0',
                    },
                },
            }
        }
    },
    created(){},
    mounted(){
        let self = this;
        self.init();
    },
    props:['isComplete'],
    components:{pulpworkInfo},
    watch:{
          "$route"(oldVal,newVal){
            this.initRootTableData('clear');
         }   
    },
    computed:{
        outHeight(){//外部表格高度
            return this.$store.state.clientHeight-184;
        }
    },
    methods:{
    //初始化数据
    init(){
        let self = this;
        self.initCache();           //初始化缓存
        self.initRootTableData();   //初始化表单数据
        self.isNurse();             //初始化当前登录用户是否是护士角色
    },
    //初始化缓存
    initCache(){
        let self = this;
        self.initNurseCache();
        self.initSatisfactionCache();
    },
    //初始化护士缓存信息
    initNurseCache(){
        let self = this;
        //所有护士信息 此处依赖统计模块的查询所有护士接口，如果该处报错或护士信息未查询到，请核对统计模块后端接口是否启动
        analysisHttp.getAllNurse({isCollNurse:false}).then(res=>{
            self.root.popover.cache.nurseData = res.content;
        });
    },
    //初始化提醒项缓存信息
    initSatisfactionCache(){
        let self = this;
        //加载满意度调查项缓存
        api.getCodeDataByCodeType('return_visit').then(res=>{
            self.root.dialog.cache.jzInfoDataItem = res.content;
        });
    },
    //条件查询表格数据
    initRootTableData(type){
        let self  = this;
        if(type==='clear'){
            self.clearSearch();
        }
        let params={
            currentPage:self.root.table.pagination.currentPage,
            pageSize:self.root.table.pagination.pageSize,
            nurseName:self.root.popover.form.nurseName ,
            providerName:self.root.popover.form.providerName ,
            createTimeLess:self.root.popover.form.createTimeLess,
            createTimeGreater:self.root.popover.form.createTimeGreater,
            isComplete:self.isComplete==true?"1":"2",              
        };
        bloodSourcesHttp.getTableXyReturnVisit(params).then(res=>{
            self.root.table.rowsData = res.content.items;
            self.root.table.pagination.total = res.content.total;
            self.root.table.option.loading = false;
        });
    },
    //点击表格分页每页显示多少条数据处理
    xyReturnVisitSizeChange(size){
        let self = this;
        self.root.table.pagination.pageSize = size;
        self.initRootTableData();
    },
    //点击表格分页页数处理
    xyReturnVisitCurrentChange(currentPage){
        let self = this;
        self.root.table.pagination.currentPage = currentPage;
        self.initRootTableData();
    },
    //清空查询条件
    clearSearch(){
        let self = this;
        self.root.popover.form.nurseName=null;
        self.root.popover.form.providerName=null;
        self.root.popover.form.createTimeLess=null;
        self.root.popover.form.createTimeGreater=null;     
    },
    //编辑按钮事件处理
    editButtonEventFun(type,row){
        let self = this;
        //打开dialog
        self.root.dialog.config.isShow = true; 
        if(self.root.dialog.config.isNurse){//如果当前登录用户是护士，则显示添加沟通功能按钮
            self.root.dialog.config.buttonShow = true;
        }
        //将当前编辑表格数据赋值到对应的弹窗表单项中
        self.setTableRowValToFormVal(row);
    },
    //点击编辑按钮将表单行值赋值给对应的表单项
    setTableRowValToFormVal(row){
                        // cardId: null,
                        // communicateContent: null,
                        // communicateState: null,
                        // communicateType: null,
                        // completeTime: null,
                        // completeUseTime: null,
                        // createTime: null,
                        // id: null,
                        // nurseDeptId: null,
                        // nurseId: null,
                        // nurseName: null,
                        // providerId: null,
                        // providerName: null,
                        // pulpingMachineNumber: null,
                        // returnVisitSelectedNumber: null,
                        // returnVisitSelectedScore: null,
                        // returnVisitType: null



            let self = this;
            //设置基础性组件查询接口类型 datatype='provider' 表示从浆员基础信息表查询 provider_info 数据库表查询
            self.root.dialog.pulpworkInfo.datatype='provider';
            //通过浆员的卡号 cardid=row.cardId 进行符合条件卡号的数据查询展示
            self.root.dialog.pulpworkInfo.cardid=row.cardId;
            //进行表格行[tablerow]数据赋值给弹窗回显的表单[form]
            self.root.dialog.form = row;
            //处理时间展示 后台数据未时间戳 ，必须转换为用户能看懂的数据
            self.root.dialog.form.completeTime=(row.completeTime==null||row.completeTime==='undefined'||row.completeTime==='')?self.timestampToTime(new Date(),'yyyy-mm-dd hh:mm:ss'):self.timestampToTime(row.completeTime,'yyyy-mm-dd');
            self.root.dialog.form.createTime=(row.createTime==null||row.createTime==='undefined'||row.createTime==='')?self.timestampToTime(new Date(),'yyyy-mm-dd hh:mm:ss'):self.timestampToTime(row.createTime,'yyyy-mm-dd');
            //处理护士姓名问题
            self.root.dialog.form.nurseName = self.nurseNameCompare(self.root.dialog.form.nurseId);
            //处理满意度选项
            if(self.root.dialog.form.returnVisitSelectedScore==null||self.root.dialog.form.returnVisitSelectedScore===""||self.root.dialog.form.returnVisitSelectedScore==="undefined"){
                self.root.dialog.form.returnVisitSelectedScore = [];
            }else{
                self.root.dialog.form.returnVisitSelectedScore= self.root.dialog.form.returnVisitSelectedScore.split(",");
            }
            //处理下拉选项数据绑定显示，由于后台返回的是数字类型，而前端框架记录的是字符串类型valueString != valueNumber 所以会有展示问题，不要问我为什么后台数据库不存varchar的，历史因素，业务关联因素，还有懒！
            if(self.root.dialog.form.communicateState==1){
               self.root.dialog.form.communicateState='1';
            }
            if(self.root.dialog.form.communicateType==1){
               self.root.dialog.form.communicateType='1';
            }
    },
    //判断当前用户是否是护士
    isNurse(){
        let self = this;
        let rolesArray = sessionStorage.getItem('roles');
        let jsonArrayRoles = JSON.parse(rolesArray);
        jsonArrayRoles.forEach((item) => {
            if(item.role_code==="ROLE_user_nurse"){
                //证明是护士登录了
                self.root.dialog.config.isNurse = true;
            }
        })    
    },
    //关闭弹窗之前 closeDialog
    closeDialog(){
        let self = this;
        self.root.dialog.timer.hour=0;
        self.root.dialog.timer.min=0;
        self.root.dialog.timer.second=0;
        window.clearInterval(self.root.dialog.timer.alarmClock)
    },
    //更新信息提醒信息
    updateButtonEventFun(){
            let self = this;
               //进行数据转化
            var params=self.root.dialog.form;
            var newObject = new Object();
            //处理2个数组
            newObject.returnVisitSelectedScore =  self.root.dialog.form.returnVisitSelectedScore.join(',') ;
            params.returnVisitSelectedScore = newObject.returnVisitSelectedScore ;
                 //进行编辑数据提交
            bloodSourcesHttp.updateXyReturnVisitInfo(params).then(res=>{
                 if(res.content){
                     self.$message({
                                    message: '提醒成功！',
                                    type: 'warning'
                                }); 
                        //关闭
                        self.root.dialog.config.isShow = false;
                        //刷新表单
                        self.initDivContentTable('clear');
                        //关闭定时器
                        self.closeDialog();
                    }else{
                     self.$message({
                                    message: '提醒失败！',
                                    type: 'warning'
                                }); 
                    }
            });
    },
    //添加表格数据
    addTableRowsFun(){
        let self = this;
        //打开弹窗
        self.root.dialog.config.isTableShow = true;
        self.root.dialog.config.isEdit = false;
        self.root.dialog.dialog.conDate=self.timestampToTime(new Date(),'yyyy-mm-dd hh:mm:ss');
    },
    //添加表格数据提交
    addTableRowsSubmit(){
        let self = this;
        let newRow ={
            conDate:self.root.dialog.dialog.conDate,
            conContent:self.root.dialog.dialog.conContent
        }
        if(self.root.dialog.config.isEdit){
            let deletedIndex = self.root.dialog.config.rowIndex;
            self.root.dialog.table.rowsData.splice(deletedIndex,1);
        }
        self.root.dialog.form.conStatus = "1";
        self.root.dialog.form.conCount=self.root.dialog.form.conCount+1;
        self.root.dialog.table.rowsData.push(newRow);
        //关闭弹窗
        self.root.dialog.config.isTableShow = false;
        //清空上次弹窗缓存信息
        self.root.dialog.dialog.conDate = null;
        self.root.dialog.dialog.conContent = null;
    },
    //内弹窗编辑按钮事件处理函数
    innerEditButtonEventFun(index,row){
        let self = this;
        //打开弹窗
        self.root.dialog.config.rowIndex = index;
        self.root.dialog.config.isEdit = true;
        self.root.dialog.config.isTableShow = true;
        self.root.dialog.dialog.conDate = row.conDate;
        self.root.dialog.dialog.conContent = row.conContent;
    },
    //根据护士ID获取相关的护士姓名
    nurseNameCompare(id){
        let self = this;
        let name = '1';
        let nurseData = self.root.popover.cache.nurseData;
        nurseData.forEach(item =>{
            if(item.id ===id)
             name = item.name;
        });
     
        return name;
    },
    //满意项全选
    handleCheckAllChange(val) {
        let self = this;
        self.root.dialog.form.returnVisitSelectedScore = val ? self.satisfactionNameArray() : [];
        this.isIndeterminate = false;
    },
    //获得满意度名称数组集合
    satisfactionNameArray(){
        let self = this;
        let nameArray = [];
        self.root.dialog.cache.jzInfoDataItem.forEach(element => {
             nameArray.push(element.name);
        });
        return nameArray;
    },
    },
}
</script>
<style scoped>

</style>